<template>
  <div
    v-for="value in Object.keys(mockConfig)"
    class="flex items-center gap-4 mb-2"
  >
    <div class="font-bold text-sm w-20">{{ value }}</div>

    <div v-for="option in mockConfig[value]" class="w-15">
      <el-radio-group v-model="config![labelMap[value] as keyof Config]">
        <el-radio :key="option" :value="option">
          {{ option }}
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Config {
  resolution: string // 比例
  aspect_ratio: string // 分辨率
  duration: string // 持续时间
}

const labelMap = {
  持续时间: 'duration',
  分辨率: 'aspect_ratio',
  比例: 'resolution'
} as any

const mockConfig = {
  持续时间: ['4s', '6s', '8s'],
  分辨率: ['16:9', '9:16'],
  比例: ['1080p', '720p']
} as any

const config = defineModel<Config>()
</script>

<style scoped lang="scss"></style>
